<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/Query.js"></script>
    <script src="./utils/getFeatureGeom.js"></script>
    <script src="./utils/setCanvasStyle.js"></script>
    <style>
        /* .btn {
            position: fixed;
            z-index: 100;
            width: 200px;
            height: 50px;
            top: 10px;
            left: 50px;
        } */
    </style>
</head>

<body>
    <button class="btn" onclick="activeDraw('Point')">交互式点查询</button>
    <button class="btn" onclick="activeDraw('Circle')">交互式圆查询</button>
    <button class="btn" onclick="activeDraw('LineString')">交互式线查询</button>
    <button class="btn" onclick="activeDraw('Box')">交互式矩形查询</button>
    <button class="btn" onclick="activeDraw('Square')">交互式正方形查询</button>
    <button class="btn" onclick="activeDraw('Polygon')">交互式多边形查询</button>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "myTestMap", {

        })
        var map = new ol.Map({
            target: "map",
            // layers: [gaode, docLayer],
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        var source = new ol.source.Vector({

        })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        /* 1、获取画笔坐标 */
        let draw = null
        function activeDraw(type) {
            if (draw) {
                map.removeInteraction(draw)
            }
            draw = createDraw({
                type,
                // type: "Point", // 画完后getGeometry。geometry.getType()得到 'Point'
                // type: "Circle",// 'Circle'
                // type: "Square",// 'Polygon'
                // type: "LineString",// 'LineString'
                // type: "Box",// 'Polygon'
                // type: "Polygon",// 'Polygon'
                /* type: Point,Circle,Square,LineString,Box,Polygon
   Square正方形(Circle的一种) Box矩形(LineString的一种) */
                source
            })
            map.addInteraction(draw);
            draw.on("drawend", evt => {
                /* geometry */
                source.clear()
                let geometry = evt.feature.getGeometry();
                // console.log(geometry, 'geometry')
                let service = {
                    name: "myTestMap",
                    layerId: 4
                }
                Query.queryByGeom({
                    geometry,
                    service,
                    success(features) {
                        highSource.clear()
                        console.log(features)
                        if (features) {
                            highSource.addFeatures(features);
                            /* features.forEach(item => {
                                // item.setStyle(style)// 这样设置不奏效，无法修改底层服务样式
                                // 只能新建一个高亮图层
                            }) */
                        }
                    }
                })

            })
        }
        /* 高亮图层 */
        //实例化一个矢量图层drawLayerr用于高亮显示结果
        var highSource = new ol.source.Vector({
        });
        highLayer = new ol.layer.Vector({
            source:highSource,
            style: setCanvasStyle(map, 40, 0.5)
        });
        map.addLayer(highLayer);

    </script>
</body>

</html>